import React,{useState,useCallback} from "react";
import { Modal, Button, Form, Input, Row, Col } from 'antd';
import { PlusOutlined } from '@ant-design/icons';


function AddItem(props){

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [stu,setStu] = useState({})

    const showModal = () => {
        setIsModalVisible(true);
    };

    const onFinish = (values) => {
        setStu(values)
        props.addRow(values)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <>
            <Button type="primary" size="small" icon={<PlusOutlined /> } style={{marginRight:5}} onClick={showModal}>
                新增
            </Button>
            <Modal title="班级信息" visible={isModalVisible}  onCancel={handleCancel } footer={null} >
                <Form
                    name="wrap"
                    labelCol={{
                        flex: '110px',
                    }}
                    labelAlign="left"
                    labelWrap
                    wrapperCol={{
                        flex: 1,
                    }}
                    colon={false}
                    onFinish={onFinish}
                    // preserve={false}
                >
                    <Form.Item
                        label="班级"
                        name="name"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="课程"
                        name="category"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="城市"
                        name="city"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="开课时间"
                        name="add_time"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Row style={{textAlign:'center'}}>
                            <Col span={12}> <Button type="primary" htmlType="submit">提交</Button>
                            </Col>
                            <Col span={12}><Button type="primary" onClick={handleCancel } >取消</Button>
                            </Col>
                        </Row>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
    
}

export default AddItem